<template>
  <view class="mine-infoitem-page">
    <view class="mine-infoitem-content">
      <up-form labelPosition="left" :model="formData" :rules="formRules" ref="updatePasswordForm">
        <view v-if="!isFirstUpdatePassword" class="p-l-24rpx p-r-36rpx">
          <up-form-item label="" prop="currentPassword" labelWidth="0" borderBottom>
            <up-input v-model="formData.currentPassword" placeholder="请输入原密码" style="width: 100%;" border="none"
              type="password"></up-input>
          </up-form-item>
        </view>
        <view class="p-l-24rpx p-r-36rpx">
          <up-form-item label="" prop="newPassword" labelWidth="0" borderBottom>
            <up-input v-model="formData.newPassword" placeholder="请输入新密码" style="width: 100%;" border="none"
              type="password"></up-input>
          </up-form-item>
        </view>
        <view class="p-l-24rpx p-r-36rpx">
          <up-form-item label="" prop="password2" labelWidth="0" borderBottom>
            <up-input v-model="formData.password2" placeholder="请输入确认密码" style="width: 100%;" border="none"
              type="password"></up-input>
          </up-form-item>
        </view>
      </up-form>
    </view>
    <view class="mine-infoitem-tip">6-16位密码，同时包含字母和数字</view>
    <view class="confirm-update" @click="confirmUpdatePassword">确认修改</view>
    <view class="seize-seat"></view>
  </view>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { firstUpdatePassword, updatePassword } from '@/genapi/_auth'
import { logout } from '@/api/_user'
import { passwordReg } from "@/utils/reg";

const formData = reactive({
  currentPassword: '',
  newPassword: '',
  password2: '',
})
const formRules = reactive({
  currentPassword: [
    {
      validator: (rule: any, value: any, cb: (val?: string) => void) => {
        if (!value) {
          cb('请输入原密码')
        } else {
          cb()
        }
      },
      trigger: ['blur', 'change'],
    }
  ],
  newPassword: [
    {
      validator: (rule: any, value: any, cb: (val?: string) => void) => {
        if (!value) {
          cb('请输入新密码')
        } else if (!validatePassword(value)) {
          cb('密码6-16位，同时包含字母和数字')
        } else {
          cb()
        }
      },
      trigger: ['blur', 'change'],
    }
  ],
  password2: [
    {
      validator: (rule: any, value: any, cb: (val?: string) => void) => {
        if (!value) {
          cb('请输入确认密码')
        } else if (!(value === formData.newPassword)) {
          cb('确认密码与新密码不一致')
        } else {
          cb()
        }
      },
      trigger: ['blur', 'change'],
    }
  ]
})
const updatePasswordForm = ref(null)

const isFirstUpdatePassword = ref(false)
const goToPage = ref('')

onLoad((options) => {
  if (options.first) {
    isFirstUpdatePassword.value = true
  } else {
    isFirstUpdatePassword.value = false
  }
  if (options.gotopage) {
    goToPage.value = options.gotopage
  } else {
    goToPage.value = ''
  }
})

/** 判断密码6-16位，必须包含英文、数字 */
function validatePassword(password: string): boolean {
  return passwordReg.test(password) && password?.length <= 16
}

function confirmUpdatePassword() {
  updatePasswordForm.value.validate().then(async (valid) => {
    if (valid) {
      const params: any = {
        newPassword: formData.newPassword,
      }
      if (isFirstUpdatePassword.value) {
        await firstUpdatePassword(params)
        uni.showToast({
          title: '密码修改成功',
          icon: 'success'
        })
        setTimeout(() => {
          logout()
        }, 500)
      } else {
        params.currentPassword = formData.currentPassword
        await updatePassword(params)
        uni.showToast({
          title: '密码修改成功',
          icon: 'success'
        })
        setTimeout(() => {
          logout()
        }, 500)
      }
    }
  })
}
</script>

<style scoped>
.mine-infoitem-page {
  padding: 0 24rpx;
}

.mine-infoitem-content {
  margin-top: 24rpx;
  background-color: #fff;
  border-radius: 16rpx;
}

.mine-infoitem-tip {
  font-size: 24rpx;
  color: #999999;
  margin-top: 16rpx;
  padding-left: 24rpx;
  padding-right: 36rpx;
}

.confirm-update {
  position: fixed;
  bottom: 69rpx;
  left: 0;
  width: 100%;
  height: 120rpx;
  line-height: 120rpx;
  text-align: center;
  background-color: #fff;
}

.seize-seat {
  width: 100%;
  height: 68rpx;
  background-color: #fff;
  border-top: 1rpx solid #eee;
  position: fixed;
  bottom: 0;
}
</style>
